<template>
  <div class="product_list">
    <el-dialog
      title="商品列表"
      :visible.sync="visible"
      width="80%"
      @close="handleClose"
    >
      <el-card shadow="never">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <el-form
          ref="searchFormRef"
          :model="searchForm"
          :inline="false"
          size="mini"
        >
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="">
                <el-input
                  v-model="searchForm.name"
                  placeholder="商品名称/模糊查询"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-input v-model="searchForm.name" placeholder="商品货号" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-select
                  v-model="searchForm.brandId"
                  value-key="id"
                  placeholder="品牌"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-select
                  v-model="searchForm.publishStatus"
                  placeholder="上架状态"
                  clearable
                  filterable
                >
                  <el-option label="上架" value="1" />
                  <el-option label="未上架" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-select
                  v-model="searchForm.verifyStatus"
                  placeholder="审核状态"
                  clearable
                  filterable
                >
                  <el-option label="审核" value="1" />
                  <el-option label="未审核" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3" :offset="1">
              <el-form-item>
                <el-button type="primary" @click="onSeach">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" class="list">
        <div slot="header">
          <span>商品列表</span>
        </div>
        <div class="table">
          <el-table
            :data="list"
            border
            highlight-current-row
            @row-click="handleRowClick"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.pic" alt="" srcset="" class="pic">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center">
              <template slot-scope="scope">
                <p>{{ scope.row.name }}</p>
                <p>
                  品牌: {{ scope.row.brandName }} | {{ scope.row.description }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="商品价格" align="center">
              <template slot-scope="scope">
                <p>原价:{{ scope.row.originalPrice }}</p>
                <p>现价: {{ scope.row.price }}</p>
              </template>
            </el-table-column>

            <el-table-column
              label="商品类别"
              align="center"
              prop="productCategoryName"
            />
            <el-table-column label="重量" align="center" prop="weight" />
          </el-table>
          <div class="page">
            <el-pagination
              :current-page.sync="page.start"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="page.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalNum"
              @size-change="sizeChange"
              @current-change="currentChange"
            />
          </div>
          <el-dialog
            title="新增热销活动"
            :visible.sync="innerVisible"
            width="50%"
            append-to-body
            class="inner_dialog"
            @close="handleInnerClose"
          >
            <el-form
              ref="recommendFormRef"
              :model="recommendForm"
              label-width="100px"
              :inline="false"
              size="mini"
            >
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="商品原价">
                    {{ recommendForm.originalPrice }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品名称">
                    {{ recommendForm.name }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="促销价格">
                    <el-input-number
                      v-model="recommendForm.promotionPrice"
                      size="mini"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="排序">
                    <el-input-number
                      v-model="recommendForm.sort"
                      size="mini"
                      :min="0"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开始时间">
                    <el-date-picker
                      v-model="recommendForm.promotionStartTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间">
                    <el-date-picker
                      v-model="recommendForm.promotionEndTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="活动限购数量">
                    <el-input v-model="recommendForm.promotionPerLimit" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品图片">
                    <img
                      :src="recommendForm.pic"
                      alt=""
                      srcset=""
                      style="width: 100px; height: 100px"
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <span slot="footer">
              <el-button @click="innerVisible = false">取消</el-button>
              <el-button type="primary" @click="handleConfirm">确定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { productsByPage } from '@/api/product/index'
import { addRecommend } from '@/api/market/list/index'
import { findAllBrand } from '@/api/product/index'
export default {
  data() {
    return {
      visible: false,
      innerVisible: false,
      searchForm: {},
      recommendForm: {},
      list: [],
      brandList: [],
      page: {
        start: 1,
        limit: 10,
        totalNum: 0
      }
    }
  },
  created() {
    this.getAllBrand()
    this.getProductList()
  },
  methods: {
    open() {
      this.visible = true
    },
    // 获取所有的品牌
    async getAllBrand() {
      const { success, data, message } = await findAllBrand()
      if (success) {
        this.brandList = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 获取所有的商品
    async getProductList() {
      const { success, data, message } = await productsByPage(
        this.page.start,
        this.page.limit,
        this.searchForm
      )
      if (success) {
        this.list = data.rows
        this.page.totalNum = data.total
      } else {
        this.$message.error(message)
      }
    },
    handleRowClick(row) {
      console.log(row)
      this.recommendForm = {
        ...row
      }
      this.innerVisible = true
    },
    sizeChange(newVal) {
      this.page.limit = newVal
      this.page.start = 1
      this.getProductList()
    },
    currentChange(newVal) {
      this.page.start = newVal
      this.getProductList()
    },
    // 搜索商品
    onSeach() {
      this.getProductList()
    },
    onReset() {
      this.searchForm = {}
    },
    // dialog 关闭
    handleClose() {},
    // 内部的dialog关闭
    handleInnerClose() {},
    // 提交
    async handleConfirm() {
      const formObj = {
        ...this.recommendForm,
        productId: this.recommendForm.id
      }
      const { success, message } = await addRecommend(formObj)

      if (success) {
        this.$message.success('保存成功')
        this.innerVisible = false
        this.visible = false
        this.$parent.getRecommends()
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.product_list {
  .list {
    margin-top: 30px;
    .table {
      height: 500px;
      overflow: auto;
      .page {
        display: flex;
        justify-content: flex-end;
      }
      .pic {
        width: 80px;
        height: 80px;
      }
    }
  }

  .inner_dialog {
  }
}
</style>
